<template>
  <div
    class="note-detail-mask"
    :style="{ 
      position: isModal ? 'fixed' : 'relative',
      backgroundColor: isModal ? 'hsla(0,0%,100%,0.98)' : 'white',
      zIndex: isModal ? 20 : 1
    }"
  >
    <div class="note-container" v-if="!loading">
      <!-- 媒体轮播 -->
      <div class="media-container">
        <el-carousel height="90vh" v-if="article.media && article.media.length > 0">
          <el-carousel-item v-for="(item, index) in article.media" :key="index">
            <el-image
                style="width: 100%; height: 100%"
                :src="item"
                fit="cover"
            />
          </el-carousel-item>
        </el-carousel>
        <div v-else class="no-media">
          <el-empty description="暂无图片" />
        </div>
      </div>

      <!-- 互动区域 -->
      <div class="interaction-container">
        <div class="author-container">
          <div class="author-me">
            <div class="info">
              <img
                  class="avatar-item"
                  style="width: 40px; height: 40px"
                  :src="article.author.avatar"
              />
              <span class="name">{{ article.author.name }}</span>
            </div>
            <div class="follow-btn">
              <el-button
                  :type="article.author.isFollowed ? 'default' : 'danger'"
                  size="large"
                  round
                  @click="toggleFollow"
              >
                {{ article.author.isFollowed ? '已关注' : '关注' }}
              </el-button>
            </div>
          </div>

          <div class="note-scroller">
            <div class="note-content">
              <div class="title">{{ article.title }}</div>
              <div class="desc">
                <span>{{ article.content }} <br /></span>
                <a
                    v-for="(tag, index) in article.tags"
                    :key="index"
                    class="tag tag-search"
                >
                  {{ tag }}
                </a>
              </div>
              <div class="bottom-container">
                <span class="date">{{ formatDate(article.creationTime) }}</span>
              </div>
            </div>
            <div class="divider interaction-divider"></div>

            <!-- 评论 -->
            <div class="comments-el">
              <div class="comments-container">
                <!-- 总评论数 -->
                <div class="total">共 {{ totalComments }} 条评论</div>

                <!-- 父评论列表 -->
                <div class="list-container">
                  <div v-for="comment in topLevelComments" :key="comment.commentID" class="parent-comment">
                    <!-- 父评论 -->
                    <div class="comment-item">
                      <div class="comment-inner-container">
                        <div class="avatar">
                          <img class="avatar-item" :src="getAvatar(comment.userID)" alt="User Avatar" />
                        </div>
                        <div class="right">
                          <div class="author-wrapper">
                            <div class="author"><a class="name">{{ getUserName(comment.userID) }}</a></div>
                          </div>
                          <div class="content">{{ comment.content }}</div>
                          <div class="info">
                            <div class="date"><span>{{ formatDate(comment.creationTime) }}</span></div>
                            <div class="interactions">
                              <div class="like" @click="toggleLike(comment)">
                      <span class="like-wrapper">
                        <Star style="width: 1em; height: 1em" />
                        <span class="count">{{ getLikeCount(comment.commentID) }}</span>
                      </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 子评论 -->
                    <div v-if="hasReplies(comment)" class="reply-container">
                      <div class="list-container">
                        <!-- 动态截取可见子评论 -->
                        <div
                            v-for="reply in visibleReplies(comment)"
                            :key="reply.commentID"
                            class="comment-item"
                        >
                          <div class="comment-inner-container">
                            <div class="avatar">
                              <img class="avatar-item" :src="getAvatar(reply.userID)" alt="User Avatar" />
                            </div>
                            <div class="right">
                              <div class="author-wrapper">
                                <div class="author"><a class="name">{{ getUserName(reply.userID) }}</a></div>
                              </div>
                              <div class="content">{{ reply.content }}</div>
                              <div class="info">
                                <div class="date"><span>{{ formatDate(reply.creationTime) }}</span></div>
                                <div class="interactions">
                                  <div class="like" @click="toggleLike(reply)">
                <span class="like-wrapper">
                  <Star style="width: 1em; height: 1em" />
                  <span class="count">{{ getLikeCount(reply.commentID) }}</span>
                </span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 展开更多回复 -->
                      <div
                          v-if="hasMoreReplies(comment) && !expandedComments[comment.commentID]"
                          class="show-more"
                          @click="toggleExpandReplies(comment.commentID)"
                      >
                        展开更多的回复
                      </div>

                      <!-- 收起回复 -->
                      <div
                          v-if="expandedComments[comment.commentID]"
                          class="show-less"
                          @click="toggleExpandReplies(comment.commentID)"
                      >
                        收起回复
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!--  -->
          </div>

          <div class="interactions-footer">
            <div class="buttons">
              <div class="left">
                <span class="like-wrapper" @click="toggleArticleLike">
                  <span class="like-lottie"> 
                    <Star style="width: 0.8em; height: 0.8em; color: #333" :style="{ color: article.isLiked ? '#ff6b6b' : '#333' }" /> 
                  </span>
                  <span class="count">{{ article.likeCount || 0 }}</span>
                </span>
                <span class="collect-wrapper" @click="toggleArticleCollect">
                  <span class="like-lottie"> 
                    <PictureRounded style="width: 0.8em; height: 0.8em; color: #333" :style="{ color: article.isCollected ? '#ff6b6b' : '#333' }" /> 
                  </span>
                  <span class="count">{{ article.collectCount || 0 }}</span>
                </span>
                <span class="chat-wrapper">
                  <span class="like-lottie"> <ChatRound style="width: 0.8em; height: 0.8em; color: #333" /> </span>
                  <span class="count">{{ totalComments }}</span>
                </span>
              </div>
              <div class="share-wrapper"></div>
            </div>
            <div class="comment-wrapper active comment-comp">
              <div class="input-wrapper">
                <input class="comment-input" type="text" placeholder="回复内容" v-model="newComment" />
                <div class="input-buttons">
                  <Close style="width: 1.2em; height: 1.2em" />
                </div>
              </div>

              <button class="submit" @click="submitComment">发送</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-else class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>

    <div class="close-cricle" @click="onCloseBtnClicked">
      <div class="close close-mask-white">
        <Close style="width: 1.2em; height: 1.2em; color: rgba(51, 51, 51, 0.8)" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Close, Star, PictureRounded, ChatRound } from "@element-plus/icons-vue";
import { ref, onMounted, computed, defineProps, watch } from 'vue';
import { useRouter, useRoute } from "vue-router";
import { TravelNoteApi } from '@/api/new/travelNoteApi.js';
import { ElMessage } from 'element-plus';

const props = defineProps({
  articleID: {
    type: [String, Number],
    default: null
  },
  isModal: {
    type: Boolean,
    default: true
  },
  returnPath: {
    type: String,
    default: '/dashboard'
  }
});

const router = useRouter();
const route = useRoute();
const loading = ref(true);
const newComment = ref('');

// 文章数据结构
const article = ref({
  articleID: null,
  title: '',
  content: '',
  tags: [],
  creationTime: '',
  author: {
    avatar: 'https://via.placeholder.com/40',
    name: '',
    isFollowed: false,
  },
  media: [],
  likeCount: 0,
  collectCount: 0,
  isLiked: false,
  isCollected: false
});

// 获取文章详情
const fetchArticleDetails = async (id) => {
  try {
    loading.value = true;
    
    // 获取文章详情
    const articleData = await TravelNoteApi.browseTravelNote(id);
    
    // 获取文章图片
    let mediaUrls = [];
    try {
      const images = await TravelNoteApi.getArticleImages(id);
      if (images && images.length > 0) {
        mediaUrls = images.map(img => img.imageUrl);
      }
    } catch (error) {
      console.error('获取文章图片失败:', error);
    }
    
    // 构建文章数据
    article.value = {
      articleID: articleData.articleID,
      title: articleData.title,
      content: articleData.content,
      tags: articleData.tags ? articleData.tags.split(',').map(tag => `#${tag.trim()}`) : [],
      creationTime: articleData.creationTime,
      author: {
        avatar: articleData.authorAvatar || 'https://via.placeholder.com/40',
        name: articleData.authorName || '未知作者',
        isFollowed: articleData.isFollowed || false,
      },
      media: mediaUrls.length > 0 ? mediaUrls : [],
      likeCount: articleData.likeCount || 0,
      collectCount: articleData.collectCount || 0,
      isLiked: articleData.isLiked || false,
      isCollected: articleData.isCollected || false
    };
    
    // 加载评论
    await loadCommentsTree(id);
  } catch (error) {
    ElMessage.error(`加载文章失败: ${error.message || '未知错误'}`);
    console.error('加载文章失败:', error);
  } finally {
    loading.value = false;
  }
};

// 关注按钮点击事件
const toggleFollow = async () => {
  try {
    // 获取用户token
    const token = localStorage.getItem('token');
    if (!token) {
      ElMessage.warning('请先登录');
      return;
    }
    
    // 调用关注/取消关注API
    if (article.value.author.isFollowed) {
      // 取消关注逻辑
      // await UserApi.unfollowUser(article.value.authorID, token);
      ElMessage.success('已取消关注');
    } else {
      // 关注逻辑
      // await UserApi.followUser(article.value.authorID, token);
      ElMessage.success('关注成功');
    }
    
    // 更新状态
    article.value.author.isFollowed = !article.value.author.isFollowed;
  } catch (error) {
    ElMessage.error(`操作失败: ${error.message || '未知错误'}`);
  }
};

// 点赞文章
const toggleArticleLike = async () => {
  try {
    const token = localStorage.getItem('token');
    if (!token) {
      ElMessage.warning('请先登录');
      return;
    }
    
    // 调用点赞API
    await TravelNoteApi.likeTravelNote(article.value.articleID, token);
    
    // 更新状态
    article.value.isLiked = !article.value.isLiked;
    article.value.likeCount += article.value.isLiked ? 1 : -1;
    
    ElMessage.success(article.value.isLiked ? '点赞成功' : '已取消点赞');
  } catch (error) {
    ElMessage.error(`操作失败: ${error.message || '未知错误'}`);
  }
};

// 收藏文章
const toggleArticleCollect = async () => {
  try {
    const token = localStorage.getItem('token');
    if (!token) {
      ElMessage.warning('请先登录');
      return;
    }
    
    // 调用收藏API
    await TravelNoteApi.collectTravelNote(article.value.articleID, token);
    
    // 更新状态
    article.value.isCollected = !article.value.isCollected;
    article.value.collectCount += article.value.isCollected ? 1 : -1;
    
    ElMessage.success(article.value.isCollected ? '收藏成功' : '已取消收藏');
  } catch (error) {
    ElMessage.error(`操作失败: ${error.message || '未知错误'}`);
  }
};

// 关闭按钮
const onCloseBtnClicked = () => {
  router.push(props.returnPath || '/dashboard');
};

/**
 * 评论部分
 */
// 评论数据
const comments = ref([]);
const expandedComments = ref({});

// 加载评论树
const loadCommentsTree = async (articleID) => {
  try {
    // 获取评论列表
    const commentsData = await TravelNoteApi.getComments(articleID);
    
    if (!Array.isArray(commentsData)) {
      comments.value = [];
      return;
    }
    
    // 构建评论树
    const parentComments = commentsData.filter(c => !c.parentCommentID);
    const childComments = commentsData.filter(c => c.parentCommentID);
    
    // 将子评论附加到父评论
    const commentsTree = parentComments.map(parent => {
      const replies = childComments.filter(child => child.parentCommentID === parent.commentID);
      return {
        ...parent,
        replies: replies
      };
    });
    
    comments.value = commentsTree;
  } catch (error) {
    console.error("加载评论失败：", error.message);
    comments.value = [];
  }
};

// 提交评论
const submitComment = async () => {
  if (!newComment.value.trim()) {
    ElMessage.warning('评论内容不能为空');
    return;
  }
  
  try {
    const token = localStorage.getItem('token');
    if (!token) {
      ElMessage.warning('请先登录');
      return;
    }
    
    // 调用评论API
    await TravelNoteApi.commentTravelNote(
      article.value.articleID,
      newComment.value,
      null, // 父评论ID，这里是null表示直接评论文章
      token
    );
    
    ElMessage.success('评论成功');
    
    // 清空输入框
    newComment.value = '';
    
    // 重新加载评论
    await loadCommentsTree(article.value.articleID);
  } catch (error) {
    ElMessage.error(`评论失败: ${error.message || '未知错误'}`);
  }
};

// 获取顶级评论
const topLevelComments = computed(() => comments.value.filter((c) => !c.parentCommentID));

// 计算总评论数
const totalComments = computed(() =>
  comments.value.reduce((acc, c) => acc + 1 + (c.replies ? c.replies.length : 0), 0)
);

// 判断是否有子评论
const hasReplies = (comment) => comment.replies && comment.replies.length > 0;

// 获取可见的子评论
const VISIBLE_REPLY_LIMIT = 2;
const visibleReplies = (comment) => {
  if (expandedComments.value[comment.commentID]) {
    return comment.replies; // 展开时显示所有子评论
  }
  return comment.replies.slice(0, VISIBLE_REPLY_LIMIT); // 未展开时显示前 N 条
};

// 判断是否有更多子评论
const hasMoreReplies = (comment) => comment.replies && comment.replies.length > VISIBLE_REPLY_LIMIT;

// 点赞评论
const toggleLike = async (comment) => {
  try {
    const token = localStorage.getItem('token');
    if (!token) {
      ElMessage.warning('请先登录');
      return;
    }
    
    // 调用点赞评论API
    // await CommentApi.likeComment(comment.commentID, token);
    
    ElMessage.success('操作成功');
    
    // 重新加载评论
    await loadCommentsTree(article.value.articleID);
  } catch (error) {
    ElMessage.error(`操作失败: ${error.message || '未知错误'}`);
  }
};

// 获取用户头像
const getAvatar = (userID) => {
  const avatars = {
    user1: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
    user2: "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
    user3: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
    user4: "https://via.placeholder.com/40",
  };
  return avatars[userID] || "https://via.placeholder.com/40";
};

// 获取用户名
const getUserName = (userID) => {
  const names = {
    user1: "用户A",
    user2: "用户B",
    user3: "用户C",
    user4: "用户D",
  };
  return names[userID] || "匿名用户";
};

// 获取点赞数
const getLikeCount = (commentID) => {
  const likeCounts = {
    1: 247,
    2: 10,
    3: 5,
  };
  return likeCounts[commentID] || 0;
};

// 格式化时间
const formatDate = (isoTime) => {
  if (!isoTime) return '';
  
  const date = new Date(isoTime);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
    date.getDate()
  ).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(
    2,
    '0'
  )}`;
};

// 切换展开/收起状态
const toggleExpandReplies = (commentID) => {
  expandedComments.value[commentID] = !expandedComments.value[commentID];
};

// 监听路由参数变化
watch(() => route.query.id, (newId) => {
  if (newId) {
    fetchArticleDetails(newId);
  }
}, { immediate: true });

// 生命周期钩子
onMounted(() => {
  // 从路由或props获取文章ID
  const id = props.articleID || route.query.id;
  if (id) {
    fetchArticleDetails(id);
  } else {
    ElMessage.error('未找到文章ID');
    loading.value = false;
  }
});
</script>

<style lang="less" scoped>
.note-detail-mask {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  z-index: 20;
  overflow: auto;

  .loading-container {
    width: 100%;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .close-cricle {
    left: 1.3vw;
    top: 1.3vw;
    position: fixed;
    display: flex;
    z-index: 100;
    cursor: pointer;

    .close-mask-white {
      box-shadow:
        0 2px 8px 0 rgba(0, 0, 0, 0.04),
        0 1px 2px 0 rgba(0, 0, 0, 0.02);
      border: 1px solid rgba(0, 0, 0, 0.08);
    }

    .close {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100%;
      width: 40px;
      height: 40px;
      border-radius: 40px;
      cursor: pointer;
      transition: all 0.3s;
    }
  }

  .note-container {
    width: 86%;

    height: 90%;
    transition:
      transform 0.4s ease 0s,
      width 0.4s ease 0s;
    transform: translate(104px, 32px) scale(1);
    overflow: visible;

    display: flex;
    box-shadow:
      0 8px 64px 0 rgba(0, 0, 0, 0.04),
      0 1px 4px 0 rgba(0, 0, 0, 0.02);
    border-radius: 20px;
    background: #895454;
    transform-origin: left top;

    .media-container {
      width: 68%;
      height: auto;

      position: relative;
      background: rgba(0, 0, 0, 0.03);
      flex-shrink: 0;
      flex-grow: 0;
      -webkit-user-select: none;
      user-select: none;
      overflow: hidden;
      border-radius: 20px 0 0 20px;
      transform: translateZ(0);
      height: 100%;
      object-fit: contain;
      min-width: 440px;
    }

    .interaction-container {
      width: 32%;
      flex-shrink: 0;
      border-radius: 0 20px 20px 0;
      position: relative;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      height: 100%;
      background-color: #fff;
      overflow: hidden;
      border-left: 1px solid rgba(0, 0, 0, 0.08);

      .author-me {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 24px;
        border-bottom: 1px solid transparent;

        .info {
          display: flex;
          align-items: center;

          .avatar-item {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 100%;
            border: 1px solid rgba(0, 0, 0, 0.08);
            object-fit: cover;
          }

          .name {
            padding-left: 12px;
            height: 40px;
            display: flex;
            align-items: center;
            font-size: 16px;
            color: rgba(51, 51, 51, 0.8);
          }
        }
      }

      .note-scroller::-webkit-scrollbar {
        display: none;
      }

      .note-scroller {
        transition: scroll 0.4s;
        overflow-y: scroll;
        flex-grow: 1;
        height: 80vh;

        .note-content {
          padding: 0 24px 24px;
          color: var(--color-primary-label);

          .title {
            margin-bottom: 8px;
            font-weight: 600;
            font-size: 18px;
            line-height: 140%;
          }

          .desc {
            margin: 0;
            font-weight: 400;
            font-size: 16px;
            line-height: 150%;
            color: #333;
            white-space: pre-wrap;
            overflow-wrap: break-word;

            .tag-search {
              cursor: pointer;
            }

            .tag {
              margin-right: 2px;
              color: #13386c;
            }
          }

          .bottom-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;

            .date {
              font-size: 14px;
              line-height: 120%;
              color: rgba(51, 51, 51, 0.6);
            }
          }
        }

        .interaction-divider {
          margin: 0 24px;
        }
        .divider {
          margin: 4px 8px;
          list-style: none;
          height: 0;
          border: solid rgba(0, 0, 0, 0.08);
          border-width: 1px 0 0;
        }

        .comments-el {
          position: relative;

          .comments-container {
            padding: 16px;

            .total {
              font-size: 14px;
              color: rgba(51, 51, 51, 0.6);
              margin-left: 8px;
              margin-bottom: 12px;
            }

            .list-container {
              position: relative;

              .parent-comment {
                margin-bottom: 16px;

                .comment-item {
                  position: relative;
                  display: flex;
                  padding: 8px;

                  .comment-inner-container {
                    position: relative;
                    display: flex;
                    z-index: 1;
                    width: 100%;
                    flex-shrink: 0;

                    .avatar {
                      flex: 0 0 auto;

                      .avatar-item {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        border-radius: 100%;
                        border: 1px solid rgba(0, 0, 0, 0.08);
                        object-fit: cover;
                        width: 40px;
                        height: 40px;
                      }
                    }

                    .right {
                      margin-left: 12px;
                      display: flex;
                      flex-direction: column;
                      font-size: 14px;
                      flex-grow: 1;

                      .author-wrapper {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .author {
                          display: flex;
                          align-items: center;
                          .name {
                            color: rgba(51, 51, 51, 0.6);
                            line-height: 18px;
                          }
                        }
                      }

                      .content {
                        margin-top: 4px;
                        line-height: 140%;
                        color: #333;
                      }

                      .info {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        font-size: 12px;
                        line-height: 16px;
                        color: rgba(51, 51, 51, 0.6);

                        .date {
                          margin: 8px 0;
                        }
                        .interactions {
                          display: flex;
                          margin-left: -2px;

                          .like-wrapper {
                            padding: 0 4px;
                            color: rgba(51, 51, 51, 0.8);
                            font-weight: 500;

                            position: relative;
                            cursor: pointer;
                            display: flex;
                            align-items: center;

                            .like-lottie {
                              width: 16px;
                              height: 16px;
                              left: 4px;
                            }

                            .count {
                              margin-left: 2px;
                              font-weight: 500;
                            }
                          }
                        }
                      }
                    }
                  }
                }

                .reply-container {
                  margin-left: 52px;

                  .show-more {
                    margin-left: 44px;
                    height: 32px;
                    line-height: 32px;
                    color: #13386c;
                    cursor: pointer;
                    font-weight: 500;
                    font-size: 14px;
                  }
                }
              }
            }
          }
        }
      }

      .interactions-footer {
        position: absolute;
        bottom: 0px;
        background: #fff;
        flex-shrink: 0;
        padding: 12px 24px 24px;
        height: 130px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        flex-basis: 130px;
        z-index: 1;

        .buttons {
          display: flex;
          justify-content: space-between;

          .count {
            margin-left: 6px;
            margin-right: 12px;
            font-weight: 500;
            font-size: 12px;
          }

          .left {
            display: flex;
            .like-wrapper {
              position: relative;
              cursor: pointer;
              display: flex;
              justify-content: left;
              color: rgba(51, 51, 51, 0.6);
              margin-right: 5px;
              align-items: center;
              .like-lottie {
                transform: scale(1.7);
              }
            }

            .collect-wrapper {
              position: relative;
              cursor: pointer;
              display: flex;
              color: rgba(51, 51, 51, 0.6);
              margin-right: 5px;
              align-items: center;
              .like-lottie {
                transform: scale(1.7);
              }
            }

            .chat-wrapper {
              cursor: pointer;
              color: rgba(51, 51, 51, 0.6);
              display: flex;
              align-items: center;
              .like-lottie {
                transform: scale(1.7);
              }
            }
          }
        }

        .comment-wrapper {
          &.active {
            .input-wrapper {
              flex-shrink: 1;
            }
          }
        }

        .comment-wrapper {
          display: flex;
          font-size: 16px;
          overflow: hidden;

          .input-wrapper {
            display: flex;
            position: relative;
            width: 100%;
            flex-shrink: 0;
            transition: flex 0.3s;

            .comment-input:placeholder-shown {
              background-image: none;
              padding: 12px 92px 12px 36px;
              background-image: url();
              background-repeat: no-repeat;
              background-size: 16px 16px;
              background-position: 16px 12px;
              color: rgba(51, 51, 51, 0.3);
            }

            .comment-input {
              padding: 12px 92px 12px 16px;
              width: 100%;
              height: 40px;
              line-height: 16px;
              background: rgba(0, 0, 0, 0.03);
              caret-color: rgba(51, 51, 51, 0.3);
              border-radius: 22px;
              border: none;
              outline: none;
              resize: none;
              color: #333;
            }

            .input-buttons {
              position: absolute;
              right: 0;
              top: 0;
              height: 40px;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 92px;
              color: rgba(51, 51, 51, 0.3);
            }
          }

          .submit {
            margin-left: 8px;
            width: 60px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 600;
            cursor: pointer;
            flex-shrink: 0;
            background: #3d8af5;
            border-radius: 44px;
            font-size: 16px;
          }
        }

        .comment-comp {
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
